/**
 * 星星的构造函数
 * @param name 必须的 容器的名字  容器data-star属性的值
 * @param count  表示星星的个数  可选
 * @param size  星星的尺寸 可选
 */
function star(name, count, size) {
  this.count = count || 5;
  this.size = size || 30;
  this.name = name;
  this.box = document.querySelector('[data-star =' + this.name + ']');
  this.show();
}
star.prototype.show = function () {
  for (var i = 0; i < this.count; i++) {
    var img = document.createElement('img');
    this.box.appendChild(img);
    img.src = 'img/1.png';
    img.style.width = this.size + 'px';
    img.style.verticalAlign = 'middle';
    img.onclick = this.starClick.bind(this);
    img.dataset.index = i + 1;
  }
  var span = document.createElement('span');
  this.box.appendChild(span);

  span.style.color = 'red';
  span.style.display = 'inline-block';
  span.style.verticalAlign = 'middle';
  span.style.marginLeft = '1rem';
  this.starLevel = span;

  var input = document.createElement('input');
  this.box.appendChild(input);

  //input的type属性为hidden在页面中是隐藏的 但是可以保存页面数据 这些数据会随着表单提交到服务器
  input.type = 'hidden';
  input.value = 0;
  input.name = this.name + '-level';
};
star.prototype.starClick = function (event) {
  var index = event.target.dataset.index - 1;
  var list = this.box.querySelectorAll('img');
  for (var i = 0; i < this.count; i++) {
    if (i <= index) {
      if (!list[i].src.endsWith('2.png')) {
        list[i].src = 'img/2.png';
      }
    } else {
      if (!list[i].src.endsWith('1.png')) {
        list[i].src = 'img/1.png';
      }
    }
  }
  this.starLevel.innerHTML = index + 1 + '分';
  this.box.querySelector('input').value = index + 1;
};
/**
 * 获取所有的含有data-star属性的元素
 */
var stars = document.querySelectorAll('[data-star]');
Array.prototype.slice.call(stars).forEach(function (Star) {
  new star(Star.dataset.star);
});

var array = Array.prototype.slice.call(stars);
array.forEach(function (sta) {
  console.log(sta);
});

var arr = [4, 2, 3, 4];
arr.forEach(function (element, index, array) {
  console.log(element + '***', index + '***', array + '***');
});

/******************************************************************/
var obj = {
  length: 2,
  0: '1',
  1: '2',
};
var result = Array.prototype.slice.call(obj);
console.log(result);
/**
 Array.prototype.slice.call(obj);
 将含有长度的对象转换为数组（提取对象中的值，放入数组
 */
